iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0

挑戰目標: MockNative Camp前端


昨天嘗試refactor時遇到了來不及解決的Bug,今天專心的在看一遍官方文件,這次注意到了
https://ithelp.ithome.com.tw/upload/images/20210924/20140358gRZ5FFRwMp.png
當時我使用的是serverRuntimeConfig,註解裡寫著

// Will only be available on the server side

代表無法在client side使用,而這個error拿去餵狗後發現只會在server side render中發生,我就在想是不是我使用錯config了,我將serverRuntimeConfig改為publicRuntimeConfig,果然是如此!
next.config.js

module.exports = {
    images: {
        domains: ['nativecamp.net']
    },
    publicRuntimeConfig: {
        navTab: [
            { name: "首頁", image: "https://nativecamp.net/user/images/gnavi/ic_home.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_home-h.svg" },
            { name: "指南", image: "https://nativecamp.net/user/images/gnavi/ic_guide.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_guide-h.svg" },
            { name: "學習", image: "https://nativecamp.net/user/images/gnavi/ic_study.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_study-h.svg" },
            { name: "搜尋・預約講師", image: "https://nativecamp.net/user/images/gnavi/ic_search.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_search-h.svg" },
            { name: "其他", image: "https://nativecamp.net/user/images/gnavi/ic_etc.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_etc-h.svg" },
        ]
    }
}

改完之後重新啟動後就正常了,完成了昨天應該完成的目標,對Nav做refactor以及解決hover bug,
https://ithelp.ithome.com.tw/upload/images/20210924/20140358jNZwOMMkyb.png

但其實有發現一個可以優化的地方,就是Image的scr是使用外部圖片,在每次hover時因為會改變圖片,所以hover時會抓取hover後圖片然後離開hover時會抓取一般圖片,導致可以從開發者工具的Network中看到隨著滑動下載圖片的次數激增。
https://ithelp.ithome.com.tw/upload/images/20210924/20140358t6xOjBBFgC.png
主要是因為是使用url去抓圖片,所以會造成這個問題,在一般開發中圖片都會存放在專案中,所以不會有這種問題,此次挑戰是能使用外部素材就使用,所以才會有此種狀況。


明天要來實作nav detail,
https://ithelp.ithome.com.tw/upload/images/20210924/201403582lIv4SeliV.png


上一篇
[Day 8]開賽八天即遭遇難題(前端篇)
下一篇
[Day 10]怎麼每天都像在趕末班電車R(前端篇)
系列文
關於我快30歲的後端工程師,想轉職成全端工程師,在前端世界中尋求機會的那件事(前端篇)18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言